<template>
	<div></div>
	</template>
	
	<script setup>
	import * as THREE from 'three';
	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	
	//创建场景
	const scene = new THREE.Scene();
	//创建相机
	const camera = new THREE.PerspectiveCamera();
	camera.position.y = 5
	camera.position.z = 10
	
	
	//创建立方体
	const geometry = new THREE.BoxGeometry(1,1,1);
	const material = new THREE.MeshBasicMaterial({color:0x00ff00});
	
	//网格
	const cube = new THREE.Mesh(geometry,material);
	cube.position.set(0,3,0)
	scene.add(cube);
	
	//添加网格地面
	const gridHelper = new THREE.GridHelper(10,10);
	scene.add(gridHelper);
	
	//创建渲染器
	const renderer = new THREE.WebGLRenderer()
	document.body.appendChild(renderer.domElement)
	//调整渲染器窗口大小
	renderer.setSize(window.innerWidth,window.innerHeight);
	
	//添加轨道控制器
	const controls = new OrbitControls(camera,renderer.domElement)
	//对轨道控制器改变时候监听
	controls.addEventListener('change',function() {
		console.log('触发change');
	})
	
	//添加阻尼
	controls.enableDamping = true;
	controls.dampingFactor = 0.01;

	//自动旋转
	controls.autoRotate =  true

	//renderer.render(scene,camera);
	
	
	function animate(){
		//告诉浏览器你希望执行一个动画
		requestAnimationFrame( animate);
		cube.rotation.x +=0.01;
		cube.rotation.y +=0.01;
		//轨道控制器更新
		controls.update();
		renderer.render(scene,camera);
	}
	animate();
	</script>
	
	<style>
	
	
	</style>
	